// 后台首页布局
import React, { useState } from 'react'
import './style.scss'
import { Layout } from 'antd'
import { connect } from 'react-redux'
import { StoreState } from '../../../store'
import HomeHeader from '../../../components/header/header'
import SideBar from '../../../components/sidebar/sidebar'

const { Content } = Layout

export interface HomeMainState {
  collapsed?: boolean
  setCollapsed?: () => void
}

const temp = window.sessionStorage.getItem('SIDEBAR_COLLAPSED')
let storageCollapsed: boolean
// side默认是展开的
storageCollapsed = temp ? JSON.parse(temp) : false

const HomeMain: React.FC = function (props: any) {
  const [collapsed, setCollapsed] = useState(storageCollapsed)
  function handleToggleCollapsed() {
    window.sessionStorage.setItem('SIDEBAR_COLLAPSED', String(!collapsed))
    setCollapsed(!collapsed)
  }

  return (
    <section className="home-main">
      <Layout>
        <SideBar collapsed={collapsed}></SideBar>
        <Layout className="right-layout">
          <HomeHeader
            collapsed={collapsed}
            setCollapsed={handleToggleCollapsed}
          ></HomeHeader>
          <Content id="container">
            {/* React.Children.map(children, (child, index) => {}) */}
            {/* 如果 `children` 是一个数组，它将被遍历并为数组中的每个子节点调用该函数，并返回一个数组。如果子节点为 `null` 或是 `undefined`，则此方法将返回 `null` 或是 `undefined`，而不会返回数组。 */}
            {/* 在Routerview组件中已经把子组件（若有）遍历出来了 */}
            {React.Children.map(props.children, child => child)}
          </Content>
        </Layout>
      </Layout>
    </section>
  )
}
const mapStateToProps = ({ user }: StoreState) => {
  return {
    userInfo: user.userInfo,
  }
}

export default connect(mapStateToProps)(HomeMain)
